<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div style="margin-top: 30px">
                    <h1>购物车案例</h1>
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>商品id</th>
                            <th>商品名字</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th><input type="checkbox" v-model="checkAll" @change="handleChecakAll">全选</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="good in goodList">
                            <th>{{good.id}}</th>
                            <td>{{good.name}}</td>
                            <td>{{good.price}}</td>
                            <td><button @click="goodReduce(good)">- </button>{{good.count}}<button @click="good.count++"> +</button></td>
                            <td><input type="checkbox" v-model="buyGoods" :value="good" @change="handleCheck"></td>
                        </tr>
                        </tbody>
                    </table>
                    <hr>
                    选中的商品:{{buyGoods}}
                    <hr>
                    总价格是：{{getPrice()}}
                </div>


            </div>

        </div>

    </div>

</div>


</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            goodList: [
                {id: '1', name: '小汽车', price: 150000, count: 2},
                {id: '2', name: '鸡蛋', price: 2, count: 1},
                {id: '3', name: '饼干', price: 10, count: 6},
                {id: '4', name: '钢笔', price: 15, count: 5},
                {id: '5', name: '脸盆', price: 30, count: 3},
            ],
            buyGoods: [],
            checkAll: false
        },
        methods: {
            getPrice() {
                var total = 0
                // 方式一：数组的循环：循环计算选中的商品价格
                // this.buyGoods.forEach(function (v,i){
                //     total+=v.price*v.count
                // })

                // 方式二：es6 的 of 循环
                for (item of this.buyGoods) {
                    // console.log(item)
                    total += item.price * item.count
                }
                return total
            },
            handleChecakAll() {
                // console.log(this.checkAll)
                if(this.checkAll){
                    this.buyGoods = this.goodList
                }
                else
                {
                    this.buyGoods = []
                }
            },
           handleCheck() {
                this.checkAll = this.goodList.length == this.buyGoods.length
            },
            goodReduce(good){
                if(good.count<0){
                    alert("值太小了")
                }
                else {
                    good.count--
                }
            }

        }


    })
</script>
</html>